<template>
  <div class="storage-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <div class="icon-wrapper">
            <el-icon class="page-icon"><House /></el-icon>
          </div>
          <div class="title-text">
            <h1>仓库管理</h1>
            <p>管理企业仓库信息，监控仓库状态</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleAdd" class="add-btn">
            <el-icon><Plus /></el-icon>
            新增仓库
          </el-button>
          <el-button @click="handleRefresh" class="refresh-btn">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><House /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ tableData.length }}</div>
            <div class="stat-label">总仓库数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon active">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ activeCount }}</div>
            <div class="stat-label">启用仓库</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon inactive">
            <el-icon><CircleClose /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ inactiveCount }}</div>
            <div class="stat-label">停用仓库</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon capacity">
            <el-icon><Box /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ totalCapacity }}</div>
            <div class="stat-label">总容量(m³)</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <div class="table-header">
        <h3>仓库列表</h3>
        <div class="table-actions">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索仓库编号或名称"
            class="search-input"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
      
      <el-table 
        :data="filteredTableData" 
        style="width: 100%" 
        border
        class="modern-table"
        :row-class-name="getRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="index" type="index" label="序号" width="80" />
        <el-table-column prop="storageCode" label="仓库编号" width="140">
          <template #default="scoped">
            <el-button link type="primary" size="small" @click="handleDetails(scoped.row)" class="code-link">
              <el-icon><Document /></el-icon>
              {{ scoped.row.storageCode }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="storageName" label="仓库名称" width="150" />
        <el-table-column prop="storageCapacity" label="仓库容量" width="120">
          <template #default="scoped">
            <span class="capacity-text">{{ scoped.row.storageCapacity }} m³</span>
          </template>
        </el-table-column>
        <el-table-column prop="storageAdder" label="仓库地址" min-width="200" show-overflow-tooltip />
        <el-table-column prop="department_Name" label="库管部门" width="120" />
        <el-table-column prop="user_Name" label="仓库主管" width="120" />
        <el-table-column prop="locationNumder" label="库位数量" width="100">
          <template #default="scoped">
            <el-tag type="info" size="small">{{ scoped.row.locationNumder }}个</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="storageState" label="仓库状态" width="100">
          <template #default="scoped">
            <el-tag 
              :type="scoped.row.storageState ? 'success' : 'danger'" 
              size="small"
              class="status-tag"
            >
              <el-icon v-if="scoped.row.storageState"><CircleCheck /></el-icon>
              <el-icon v-else><CircleClose /></el-icon>
              {{ scoped.row.storageState ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="loginUserName" label="操作人" width="100" />
        <el-table-column prop="creatTime" label="操作时间" width="160">
          <template #default="scoped">
            <span class="time-text">{{ moment(scoped.row.creatTime).format("YYYY-MM-DD") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scoped">
            <div class="action-buttons">
              <el-button link type="primary" size="small" @click="handleEdit(scoped.row)" class="edit-btn">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button link type="danger" size="small" @click="handleDeleteOne(scoped.row.storageId)" class="delete-btn">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="dialogTableVisible" 
      title="编辑仓库信息" 
      width="900px"
      class="edit-dialog"
      :close-on-click-modal="false"
    >
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="140px" class="storage-form">
        <!-- 基本信息卡片 -->
        <div class="form-card">
          <div class="card-header">
            <el-icon class="card-icon"><Document /></el-icon>
            <h3>基本信息</h3>
          </div>
          
          <!-- 第一行：仓库编号和仓库名称 -->
          <div class="form-row">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="仓库编号" prop="storageCode">
                  <el-input v-model="ruleForm.storageCode" readonly class="code-input" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="仓库名称" prop="storageName">
                  <el-input v-model="ruleForm.storageName" placeholder="请输入仓库名称" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 第二行：仓库容量和库位数量 -->
          <div class="form-row">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="仓库容量" prop="storageCapacity">
                  <el-input-number v-model="ruleForm.storageCapacity" :min="1" :max="999999" placeholder="请输入仓库容量" class="capacity-input">
                    <template #suffix>m³</template>
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库位数量" prop="locationNumder">
                  <el-input-number v-model="ruleForm.locationNumder" :min="1" :max="9999" placeholder="请输入库位数量" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 管理信息卡片 -->
        <div class="form-card">
          <div class="card-header">
            <el-icon class="card-icon"><User /></el-icon>
            <h3>管理信息</h3>
          </div>
          
          <!-- 第三行：所属部门和仓库主管 -->
          <div class="form-row">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="所属部门" prop="department_Id">
                  <el-select v-model="ruleForm.department_Id" placeholder="请选择所属部门" clearable>
                    <el-option v-for="dept in departmentOptions" :key="dept.department_Id" :label="dept.department_Name" :value="dept.department_Id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="仓库主管" prop="user_WorkCode">
                  <el-select v-model="ruleForm.user_WorkCode" placeholder="请选择仓库主管" clearable>
                    <el-option v-for="user in userOptions" :key="user.user_WorkCode" :label="user.user_Name" :value="user.user_WorkCode" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 详细信息卡片 -->
        <div class="form-card">
          <div class="card-header">
            <el-icon class="card-icon"><Location /></el-icon>
            <h3>详细信息</h3>
          </div>
          
          <!-- 第四行：仓库地址 -->
          <div class="form-row">
            <el-form-item label="仓库地址" prop="storageAdder">
              <el-input v-model="ruleForm.storageAdder" type="textarea" :rows="3" placeholder="请输入仓库详细地址" clearable />
            </el-form-item>
          </div>

          <!-- 第五行：仓库状态 -->
          <div class="form-row">
            <el-form-item label="仓库状态" prop="storageState">
              <el-radio-group v-model="ruleForm.storageState" class="status-radio">
                <el-radio :label="true" class="status-option">
                  <el-icon class="status-icon"><CircleCheck /></el-icon>
                  启用
                </el-radio>
                <el-radio :label="false" class="status-option">
                  <el-icon class="status-icon"><CircleClose /></el-icon>
                  停用
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 第六行：备注 -->
          <div class="form-row">
            <el-form-item label="备注信息">
              <el-input v-model="ruleForm.description" type="textarea" :rows="3" placeholder="请输入备注信息（可选）" clearable />
            </el-form-item>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-form-item>
            <el-button type="primary" @click="submitForm()" :loading="submitting" class="submit-btn">
              <el-icon><Check /></el-icon>
              保存修改
            </el-button>
            <el-button @click="goBack" class="cancel-btn">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  Plus, 
  Refresh, 
  Delete, 
  Edit, 
  Search, 
  House, 
  Document, 
  User, 
  Location, 
  CircleCheck, 
  CircleClose, 
  Box 
} from '@element-plus/icons-vue';
import { http } from '@/axios/axiosHelpers';

const router = useRouter();
const tableData = ref([]);
const searchKeyword = ref('');
const dialogTableVisible = ref(false);
const ruleFormRef = ref();
const submitting = ref(false);

// 计算属性
const filteredTableData = computed(() => {
  if (!searchKeyword.value) return tableData.value;
  return tableData.value.filter(item => 
    item.storageCode?.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    item.storageName?.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

const activeCount = computed(() => {
  return tableData.value.filter(item => item.storageState).length;
});

const inactiveCount = computed(() => {
  return tableData.value.filter(item => !item.storageState).length;
});

const totalCapacity = computed(() => {
  return tableData.value.reduce((sum, item) => sum + (item.storageCapacity || 0), 0);
});

onMounted(() => {
  getData();
  getDepartment();
  getuserOptions();
});

const getData = () => {
  http.get("/basicread/api/Storage/GetStorage").then(res => {
    tableData.value = res.data.data;
  });
};

const handleAdd = () => {
  router.push("/StorageAdd");
};

const handleRefresh = () => {
  getData();
  ElMessage.success('数据已刷新');
};

const handleSearch = () => {
  // 搜索功能通过计算属性自动实现
};

const handleDeleteOne = (storageId: any) => {
  ElMessageBox.confirm(
    '确定要删除这个仓库吗？删除后无法恢复。',
    '确认删除',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      http.get("/basicwrite/api/Storage/DelStorage?StorageId=" + storageId).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          getData();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage.info('删除操作已取消');
    });
};

const handleEdit = (row: any) => {
  dialogTableVisible.value = true;
  Object.assign(ruleForm, row);
  ruleForm.user_WorkCode = row.user_WorkCode;
};

// 表单数据
const ruleForm = reactive({
  storageCode: "",
  storageName: "",
  storageCapacity: 500,
  storageAdder: "",
  department_Id: null as number | null,
  user_WorkCode: "",
  locationNumder: 10,
  storageState: true,
  description: '',
  loginUserName: localStorage.getItem("userName")
});

// 部门选项
const departmentOptions = ref([{
  "department_Id": '',
  "department_Name": "",
}]);

const getDepartment = () => {
  http.get("/basicread/api/DepartMentAll/ShowDepartMent").then(res => {
    departmentOptions.value = res.data.data;
  });
};

// 用户选项
const userOptions = ref([{
  "user_WorkCode": "",
  "user_Name": "",
}]);

const getuserOptions = () => {
  http.get("/basicread/api/UserValues/ShowUser?PageIndex=1&PageSize=15").then(res => {
    userOptions.value = res.data.data.data;
  });
};

// 提交表单
const submitForm = () => {
  submitting.value = true;
  http.post("/basicwrite/api/Storage/UpdateStorage", ruleForm).then(res => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      dialogTableVisible.value = false;
      getData();
    } else {
      ElMessage.error(res.data.msg);
    }
  }).catch(error => {
    ElMessage.error('提交失败，请检查网络连接');
  }).finally(() => {
    submitting.value = false;
  });
};

const goBack = () => {
  dialogTableVisible.value = false;
};

// 表格行样式
const getRowClassName = ({ row }: { row: any }) => {
  return row.storageState ? 'active-row' : 'inactive-row';
};

//跳转详情 - 将选中的仓库数据传递给StorageDetail组件
const handleDetails=(row: any)=>{
  // 使用router.push传递参数
  router.push({
    path: '/StorageDetail',
    query: {
      storageId: row.storageId,
      storageCode: row.storageCode,
      storageName: row.storageName,
      storageCapacity: row.storageCapacity,
      storageAdder: row.storageAdder,
      department_Name: row.department_Name,
      user_Name: row.user_Name,
      locationNumder: row.locationNumder,
      storageState: row.storageState,
      loginUserName: row.loginUserName,
      creatTime: row.creatTime
    }
  });
}


</script>

<style scoped>
.storage-container {
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
}

.storage-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.page-header {
  padding: 40px 60px 30px;
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-icon {
  font-size: 28px;
  color: white;
}

.title-text h1 {
  margin: 0 0 8px 0;
  color: white;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 400;
}

.header-actions {
  display: flex;
  gap: 16px;
}

.add-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 统计卡片 */
.stats-section {
  padding: 0 60px 30px;
  position: relative;
  z-index: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stat-icon.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-icon.inactive {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.stat-icon.capacity {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* 表格区域 */
.table-section {
  padding: 0 60px 60px;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  padding: 24px 30px;
  border-radius: 16px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
}

.search-input {
  width: 300px;
}

.modern-table {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
:deep(.el-table) {
  background: transparent;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #374151;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 0;
}

:deep(.el-table tr:hover > td) {
  background: rgba(59, 130, 246, 0.05);
}

.active-row {
  background: rgba(16, 185, 129, 0.05);
}

.inactive-row {
  background: rgba(239, 68, 68, 0.05);
}

/* 表格内容样式 */
.code-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.capacity-text {
  font-weight: 600;
  color: #059669;
}

.time-text {
  color: #64748b;
  font-size: 13px;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.edit-btn, .delete-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* 对话框样式 */
.edit-dialog {
  border-radius: 20px;
}

:deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 24px 30px;
  border-bottom: 1px solid #e2e8f0;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

:deep(.el-dialog__body) {
  padding: 0;
}

/* 表单样式 */
.storage-form {
  background: transparent;
}

.form-card {
  margin-bottom: 30px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f2f5;
  overflow: hidden;
}

.form-card:last-of-type {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 30px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.card-icon {
  font-size: 20px;
  color: #3b82f6;
}

.card-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

.form-row {
  padding: 30px;
  border-bottom: 1px solid #f1f5f9;
}

.form-row:last-child {
  border-bottom: none;
}

.form-actions {
  padding: 40px 30px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

/* 表单控件样式 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

:deep(.el-input__wrapper:hover) {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  resize: vertical;
}

:deep(.el-textarea__inner:hover) {
  border-color: #3b82f6;
}

:deep(.el-textarea__inner:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 特殊输入框样式 */
.code-input :deep(.el-input__wrapper) {
  background: #f8fafc;
  border-color: #d1d5db;
}

.status-radio {
  display: flex;
  gap: 40px;
}

.status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  cursor: pointer;
}

.status-option:hover {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.status-option.is-checked {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}

.status-icon {
  font-size: 16px;
}

/* 按钮样式 */
.submit-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.cancel-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border: none;
  color: white;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .page-header {
    padding: 30px 40px 20px;
  }
  
  .stats-section {
    padding: 0 40px 30px;
  }
  
  .table-section {
    padding: 0 40px 40px;
  }
  
  .title-text h1 {
    font-size: 28px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .storage-container {
    padding: 0;
  }
  
  .page-header {
    padding: 20px 20px 15px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .title-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .page-icon {
    font-size: 24px;
  }
  
  .title-text h1 {
    font-size: 24px;
  }
  
  .title-text p {
    font-size: 14px;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .add-btn, .refresh-btn {
    width: 100%;
  }
  
  .stats-section {
    padding: 0 20px 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .table-section {
    padding: 0 20px 20px;
  }
  
  .table-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .search-input {
    width: 100%;
  }
  
  .title-text h1 {
    font-size: 20px;
  }
  
  .title-text p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 15px 15px 10px;
  }
  
  .stats-section {
    padding: 0 15px 15px;
  }
  
  .table-section {
    padding: 0 15px 15px;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .table-header {
    padding: 20px;
  }
  
  .title-text h1 {
    font-size: 18px;
  }
  
  .title-text p {
    font-size: 12px;
  }
}
</style>
